<template>
  <div class="map-container">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  name: 'LoadGeoJSON',
  data() {
    return {
      map: null,
      geoJsonLayer: null,
      baseLayer: null,
      labelGroup: null  // 添加标签图层组
    }
  },
  mounted() {
    this.initMap()
    this.loadGeoJSON()
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = L.map('map', {
        center: [43.792818, 87.617733], // 乌鲁木齐市中心坐标
        zoom: 6,
        zoomControl: true
      })

      // 添加高德底图
      this.baseLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
        subdomains: ["1", "2", "3", "4"],
        attribution: '&copy; 高德地图'
      }).addTo(this.map)
    },

    async loadGeoJSON() {
      try {
        // 加载GeoJSON数据
        const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=650000_full')
        const geoData = await response.json()

        // 创建标签图层组
        this.labelGroup = L.layerGroup().addTo(this.map)

        // 创建GeoJSON图层
        this.geoJsonLayer = L.geoJSON(geoData, {
          style: {
            color: '#3388ff', // 边界线颜色
            weight: 2, // 边界线宽度
            opacity: 1, // 边界线透明度
            fillColor: '#3388ff', // 填充颜色
            fillOpacity: 0.2 // 填充透明度
          },
          onEachFeature: (feature, layer) => {
            // 添加鼠标悬停效果
            layer.on({
              mouseover: (e) => {
                const layer = e.target
                layer.setStyle({
                  weight: 3,
                  fillOpacity: 0.5
                })
              },
              mouseout: (e) => {
                const layer = e.target
                layer.setStyle({
                  weight: 2,
                  fillOpacity: 0.2
                })
              }
            })

            // 添加点击弹窗
            layer.bindPopup(`
              <div>
                <h3>${feature.properties.name}</h3>
                <p>行政区划代码: ${feature.properties.adcode}</p>
                <p>级别: ${feature.properties.level}</p>
              </div>
            `)

            // 添加城市名称标注
            if (feature.properties.name && feature.properties.center) {
              const [lng, lat] = feature.properties.center
              L.marker([lat, lng], {
                icon: L.divIcon({
                  className: 'city-label',
                  html: `<span>${feature.properties.name}</span>`,
                  iconSize: null,
                  iconAnchor: [0, 0],
                  className: 'city-label-container'
                })
              }).addTo(this.labelGroup)
            }
          }
        }).addTo(this.map)

        // 缩放地图以适应GeoJSON图层范围
        this.map.fitBounds(this.geoJsonLayer.getBounds())

      } catch (error) {
        console.error('加载GeoJSON数据失败:', error)
      }
    }
  },
  beforeDestroy() {
    // 清理地图实例
    if (this.map) {
      if (this.labelGroup) {
        this.labelGroup.clearLayers()
      }
      this.map.remove()
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

/* 城市标注样式 */
:deep(.city-label-container) {
  background: transparent;
  border: none;
  transform: translate(-50%, -50%);  /* 居中对齐 */
}

:deep(.city-label-container span) {
  display: block;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  cursor: default;
  text-align: center;
}
</style> 